<template>
	<div class="person">
		<div class="content">
			<img src="static/images/wenjuan-banner.png" alt="" />
			<div class="showl">
				<span>★</span>问卷调查是您对我们服务的督促,也是检查鞭策自己的工作的动力,感谢你的问卷调查,祝你生活愉快!
			</div>
			<!--试题区域-->
			<ul class="question">
				<li v-for="(item,i) in question" v-if='item.radioOrCheckbox==2' :id=item.questionId>
					<div class="title">题目{{i+1}}、{{item.questionTitle}}</div>
					<div class="inputF" v-for="(item0, j) in item.optionDecription.split(',')">
						<input type='checkbox' :name=i > {{String.fromCharCode('A'.charCodeAt()+j)}}.{{item0}}
					</div>
				</li>
				<li v-for="(item,i) in question"  v-if='item.radioOrCheckbox==1' :id=item.questionId>
					<div class="title">题目{{i+1}}、{{item.questionTitle}}</div>
					<div class="inputF" v-for="(item0, j) in item.optionDecription.split(',')">
						<input type='radio' :name=i > {{String.fromCharCode('A'.charCodeAt()+j)}}.{{item0}}
					</div>
				</li>
			</ul>
		</div>
		<div class="btnDz">
			<button class="btnReset">重置</button><button class="btnStart">开始定制</button>
		</div>
		<div class="contain">
			<div id="item1" class="mui-control-content mui-active">
				<ul class="mui-table-view newHouse">
					<li class=" mui-media" style='padding: 11px 9px;' v-for="(list,i) in houseList">
						<div class='houseId' :houseId=list.houseId>
							<img class="mui-media-object mui-pull-left" style="" :src=list.src>
							<div class="mui-media-body" style='font-size:15px;'>
								{{list.houseName}}
								<span style='float:right;margin-right:10px;color:#e51c23;'>贴近度{{(i+1)*15}}%</span>
								<p class="mui-ellipsis" style="margin-top:6px;margin-bottom:0;color:#666;">{{list.houseAddress}}</p>
								<p class="mui-ellipsis star" style="margin-top:6px;margin-bottom:0;color:#666"><span class='score'>
									<img v-for="item in hasStar(list.houseCore)" :src=item alt="" style="width:14px;"/>
									{{list.houseCore}}</span>分　<span style='float:right;margin-right:10px;color:#e51c23;'>{{list.housePrice}}元/平</span></p>
								<p class="mui-ellipsis" style="margin-top:6px;margin-bottom:0;" v-if="houseType=='new'?true:false">
									<span style="line-height:20px;border:1px solid #ccc;margin:1px;padding:2px 4px;font-size:12px;">在售</span>
									<span style="line-height:20px;border:1px solid #ccc;margin:1px;padding:2px 4px;font-size:12px;">住宅</span>
									<span style="line-height:20px;border:1px solid #ccc;margin:1px;padding:2px 4px;font-size:12px;">地铁口</span>
									<span style="line-height:20px;border:1px solid #ccc;margin:1px;padding:2px 4px;font-size:12px;">公元地产</span>
								</p>
								<p class="mui-ellipsis" style="margin-top:6px;margin-bottom:0;" v-if="houseType=='xiaoQu'?true:false">
									<span style="line-height:20px;color:#0186c2;margin:1px;padding:2px 4px;font-size:12px;">房源(60套)</span>
									<span style="line-height:20px;margin:1px;padding:2px 4px;font-size:12px;">2011年建造</span>
								</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				houseList:[],
				houseType:'new',
				question:[],
				time:1,
				answer:[]
			}
		},
		created:function(){
//			let user = localStorage.getItem('user');
//			if(!user){
//				this.$router.push({
//					path:'/login'
//				})
//			}
		},
		mounted: function() {
			var userId = localStorage.getItem('customerId');
			if(!userId){
				console.log(1111111111)
			}
			
			var that = this;
			let ajaxURL = localStorage.getItem("ajaxURL");
			$.ajax({
				url:`${ajaxURL}/houseweb/H5/privateCustom.do`,
				cache: false,
				dataType: 'jsonp',
				success: function(data) {
					that.question=data.data.checkbox
					console.log(that.question)
				}
			})
			$('.question').on('click','input',function(){
				$(this).attr('checked','checked')
			})
			//开始定制
			$('.btnStart').click(function(){
				var str0 = $('.inputF input[name=0]').splice(0,$('.inputF input[name=0]').length)
				var s0='';
				var s1='';
				var s2='';
				var s3='';
				var s4='';
				for(var i in str0){
					if($(str0[i]).prop('checked')){
						s0+=$(str0[i]).parent().text().split('.')[0]
					}
				}
				var answer0={
					questionId:$('.inputF input[name=0]').parent().parent().attr('id'),
					answer:s0.split(' ').join('')
				}
				
				var str1 = $('.inputF input[name=1]').splice(0,$('.inputF input[name=0]').length)
				var s1='';
				for(var i in str1){
					if($(str1[i]).prop('checked')){
						s1+=$(str1[i]).parent().text().split('.')[0]
					}
				}
				var answer1={
					questionId:$('.inputF input[name=1]').parent().parent().attr('id'),
					answer:s1.split(' ').join('')
				}
				
				var str2 = $('.inputF input[name=2]').splice(0,$('.inputF input[name=0]').length)
				var s2='';
				for(var i in str2){
					if($(str2[i]).prop('checked')){
						s2+=$(str2[i]).parent().text().split('.')[0]
					}
				}
				var answer2={
					questionId:$('.inputF input[name=2]').parent().parent().attr('id'),
					answer:s2.split(' ').join('')
				}
				
				var str3 = $('.inputF input[name=3]').splice(0,$('.inputF input[name=0]').length)
				var s3='';
				for(var i in str3){
					if($(str3[i]).prop('checked')){
						s3+=$(str3[i]).parent().text().split('.')[0]
					}
				}
				var answer3={
					questionId:$('.inputF input[name=3]').parent().parent().attr('id'),
					answer:s3.split(' ').join('')
				}
				
				var str4 = $('.inputF input[name=4]').splice(0,$('.inputF input[name=0]').length)
				var s4='';
				for(var i in str4){
					if($(str4[i]).prop('checked')){
						s4+=$(str4[i]).parent().text().split('.')[0]
					}
				}
				var answer4={
					questionId:$('.inputF input[name=4]').parent().parent().attr('id'),
					answer:s4.split(' ').join('')
				}
				
				that.answer=[
					answer0,answer1,answer2,answer3,answer4,
				]
				$('.contain').show();
				$('html,body').animate({scrollTop:$('.contain').offset().top}, 800);
				that.ajaxU0(1);
			})
			
//			$(window).scroll(function() {
//				var i = 1;　　
//				var scrollTop = $(this).scrollTop();　　
//				var scrollHeight = $(document).height();　　
//				var windowHeight = $(this).height();　　
//				if(scrollTop + windowHeight == scrollHeight) {　　　　
//					//					alert("已经到最底部了！");
//					setTimeout(function() {
//						i++;
//						this.ajaxU0(i)　
//					}.bind(that), 300);
//				}
//			});
		},
		methods: {
			hasStar: function(houseCore) {
				let star = [];
				let str = houseCore / 20;
				for(let i = 0; i < Math.floor(str); i++) {
					star.push('static/images/red-star.png');
				}
				if(str - Math.floor(str) >= 0.75) {
					star.push('static/images/red-star.png');
				} else if(str - Math.floor(str) >= 0.25) {
					star.push('static/images/half-red-star.png');
				} else if(str!=5){
					star.push('static/images/prompt-star.png');
				}
				if(Math.floor(str) < 5) {
					for(let i = 4; i > Math.floor(str); i--) {
						star.push('static/images/prompt-star.png');
					}
				}
				return star;
			},
			ajaxU0: function(page0) {
				var that = this;
				let ajaxURL = localStorage.getItem("ajaxURL");
				let city0 = localStorage.getItem("city");
				that.houseType = 'xiaoQu'
				$.ajax({
					url: `${ajaxURL}/houseweb/H5/savePrivateCustom.do`,
					cache: false,
					data: {
						customerId:222,
						city: city0,
						questions:JSON.stringify(that.answer),
					},
					dataType: 'jsonp',
					success: function(data) {
						console.log(data)
						that.houseList = data.data.houseList;
					}
				})
			}
		}
	}
</script>
<style scoped>
	.person {
		background-color: #fff;
	}
	.content {
		width: 100%;
		background-color: #fff;
		overflow: hidden;
	}
	
	.content img {
		width: 100%;
	}
	
	.showl {
		color: #999;
		font-size: 12px;
		margin: 0 20px;
	}
	
	.showl span {
		font-size: 16px;
		font-weight: bold;
		margin-right: 10px;
	}
	
	.content .question {
		list-style: none;
		font-size: 14px;
		padding: 0;
		margin: 0 3%;
	}
	
	.content .question li {
		margin: 5px 10px;
	}
	.content .question li div {
		float: left;
		color:#999;
		font-size:13px;
		margin: 5px 15px 0 0;
	}
	.content .question li .title {
		width: 100%;
		color:#333;
		font-size: 14px;
	}
	
	.btnDz {
		text-align: center;
		margin-top: 10px;
		margin-bottom: 50px;
		padding-bottom: 50px;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
	}
	.btnDz button {
		width: 35%;
		border-color: #c6c6c6;
	}
	.btnDz .btnReset {
		background-color: #f8f8f8;
	}
	.btnDz .btnStart {
		background-color: #0186c2;
		color: #fff;
	}
	.contain {
		display: none;
	}
</style>